<template>
  <div id="app">
    <el-watermark :font="themeStore.currentTheme === 'dark' ? fontDark : font"
      :content="params.ShowWatermark === '1' ? (userInfo?.username) : ''">
      <router-view />
    </el-watermark>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useUser } from '@/store/user'
import { useTheme } from './store/theme'

const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})

const fontDark = reactive({
  color: 'rgba(255, 255, 255, .15)',
})

const { params, userInfo } = useUser()
const themeStore = useTheme()

</script>

<style>
#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* 支持Element Plus暗黑模式 */
html.dark {
  color-scheme: dark;
}
</style>